<template>
  <div class="homepage">
    <div class="scrolltop" v-show="totop" @click="toTop">回到顶部</div>
    <div class="usermoney">
      <div class="left">
        {{userdata.nickname?userdata.nickname:''}}，你有
        <span>1024</span> 金币！
      </div>
      <router-link to="/MyDraw" class="right">
        我的抽奖
        <img src="@/assets/img/right.png" alt>
      </router-link>
    </div>
    <div class="swiper">
      <swiper :aspect-ratio="0.5" :list="demo01_list" @on-index-change="demo01_onIndexChange"></swiper>
    </div>

    <div class="draw_title">
      <div class="left">金币抽奖</div>
      <router-link to="/HavePrize" class="right">
        查看往期开奖记录
        <img src="@/assets/img/right.png" alt>
      </router-link>
    </div>

    <div
      v-infinite-scroll="loadMore"
      :infinite-scroll-disabled="busy"
      infinite-scroll-distance="200"
    >
      <div class="goods_list">
        <ul>
          <li v-for="item in goods_list" :key="item.id">
            <img class="goods_img" :src="item.img" alt>
            <div class="goods_text">
              <p class="goods_name">{{item.name}}</p>
              <p class="goods_word">{{item.title}}</p>
              <p>满1000人就开奖！</p>
              <div class="goods_join">
                <div class="gold">
                  <p>500金币即可参与</p>
                  <p>目前人数：843/1000</p>
                </div>
                <router-link to="/JoinDraw" class="btn">马上参加</router-link>
              </div>
            </div>
          </li>
        </ul>
        <load-more tip="loading" :show-loading="busy"></load-more>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, LoadMore } from "vux";
import { mapGetters, mapMutations } from "vuex";

import axios from "axios";
import { error } from "util";
export default {
  components: {
    Swiper,
    LoadMore
  },
  data() {
    return {
      busy: false,
      totop: false,
      loading: true,
      swipermodel: true,
      demo01_list: [
        {
          url: "/GoodsData",
          id: 1,
          img:
            "https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg",
          title: "111111111111111"
        },
        {
          url: "/GoodsData",
          id: 2,
          img:
            "https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg",
          title: "22222222222222222"
        },
        {
          url: "/GoodsData",
          id: 3,
          img:
            "https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg",
          title: "333333333333"
        }
      ],
      goods_list: [
        {
          id: 1,
          name: "小米8 青春版 4GB+64GB",
          img: "https://i1.mifile.cn/a1/pms_1537323963.1278763!220x220.jpg",
          title: "潮流镜面渐变色，2400万自拍旗舰"
        },
        {
          id: 2,
          name: "小米8 屏幕指纹版 8GB+128GB",
          img: "https://i1.mifile.cn/a1/pms_1537356460.6227958!220x220.png",
          title: "全球首款压感屏幕指纹，双频GPS超精准定位"
        },
        {
          id: 3,
          name: "小米8 SE 4GB+64GB",
          img: "https://i1.mifile.cn/a1/pms_1527684990.93616987!220x220.jpg",
          title: "AI 超感光双摄，三星 AMOLED 屏幕"
        },
        {
          id: 4,
          name: "小米MIX 2S 8GB+256GB",
          img: "https://i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg",
          title: "骁龙845 年度旗舰处理器，艺术品般陶瓷机身"
        },
        {
          id: 5,
          name: "小米MIX 2 全陶瓷尊享版",
          img: "https://i1.mifile.cn/a1/pms_1509723483.31416776!220x220.jpg",
          title: "全面屏2.0，Unibody 全陶瓷"
        }
      ],
      addgoods_list: [
        {
          id: 1,
          name: "小米8 青春版 4GB+64GB",
          img: "https://i1.mifile.cn/a1/pms_1537323963.1278763!220x220.jpg",
          title: "潮流镜面渐变色，2400万自拍旗舰"
        },
        {
          id: 2,
          name: "小米8 屏幕指纹版 8GB+128GB",
          img: "https://i1.mifile.cn/a1/pms_1537356460.6227958!220x220.png",
          title: "全球首款压感屏幕指纹，双频GPS超精准定位"
        },
        {
          id: 3,
          name: "小米8 SE 4GB+64GB",
          img: "https://i1.mifile.cn/a1/pms_1527684990.93616987!220x220.jpg",
          title: "AI 超感光双摄，三星 AMOLED 屏幕"
        },
        {
          id: 4,
          name: "小米MIX 2S 8GB+256GB",
          img: "https://i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg",
          title: "骁龙845 年度旗舰处理器，艺术品般陶瓷机身"
        },
        {
          id: 5,
          name: "小米MIX 2 全陶瓷尊享版",
          img: "https://i1.mifile.cn/a1/pms_1509723483.31416776!220x220.jpg",
          title: "全面屏2.0，Unibody 全陶瓷"
        }
      ],
      userinfo: {
        access_token: "",
        expires_in: "",
        openid: "",
        refresh_token: "",
        scope: ""
      },
      userdata: {}
    };
  },
  created() {
    console.log(this.$route.query.code);

    if (!this.$route.query.code) {
      window.location =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5a7b2220a8469e2f&redirect_uri=http://lys.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirec";
    }
    var userdata = JSON.parse(localStorage.getItem("userdata"));
    console.log(userdata);
    this.userdata = userdata ? userdata : {};

    if (!userdata) {
      var that = this;
      axios.get("/sns/oauth2/access_token", {
          baseURL: "/api",
          params: {
            secret: "18407fc61a29cd32098e65f959f1dcae",
            appid: "wx5a7b2220a8469e2f",
            code: that.$route.query.code,
            grant_type: "authorization_code"
          }
        })
        .then(function(response) {
          that.userinfo = response.data;
          console.log(that.userinfo);
          if (response.status == 200) {
            axios
              .get("/sns/userinfo", {
                baseURL: "/api",
                params: {
                  access_token: that.userinfo.access_token,
                  openid: that.userinfo.openid,
                  lang: "zh_CN"
                }
              })
              .then(function(response) {
                console.log(response);

                if (response.status == 200) {
                  that.userdata = response.data;
                  console.log(response.data);

                  localStorage.setItem(
                    "userdata",
                    JSON.stringify(response.data)
                  );
                }
              })
              .catch(function(error) {
                console.log(error);
              });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  mounted() {
    //  wx.config = {
    //   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    //   appId: 'wx5a7b2220a8469e2f', // 必填，公众号的唯一标识
    //   timestamp: new Date().getTime(), // 必填，生成签名的时间戳
    //   nonceStr: '', // 必填，生成签名的随机串
    //   signature: '', // 必填，签名，见附录1
    //   jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    // }

    //   axios.get('/cgi-bin/token', {
    //     baseURL:'/api',
    //   params: {
    //     grant_type: 'client_credential',
    //     appid:'wx5a7b2220a8469e2f',
    //     secret:'18407fc61a29cd32098e65f959f1dcae'
    //   }
    // })
    // .then(function (response) {
    //   console.log(response.data.access_token);
    //   localStorage.setItem('access_token',response.data.access_token)
    // })
    // .catch(function (error) {
    //   console.log(error);
    // });
    //https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

    //  access_token

    //api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

    var _this = this;
    window.addEventListener("scroll", function() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 100) {
        _this.totop = true;
        //滚动条的高度，可以动态获取也可以写死
        //这里写要执行的操作
      } else {
        _this.totop = false;
      }
    });
  },
  methods: {
    toTop() {
      const timer = setInterval(function() {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 30);
    },
    demo01_onIndexChange() {},
    loadMore() {
      this.busy = true;
      //官方示例中延迟了1秒，防止滚动条滚动时的频繁请求数据
      setTimeout(() => {
        //这里请求接口去拿数据，实际应该是调用一个请求数据的方法

        this.goods_list = this.goods_list.concat(this.addgoods_list);

        this.busy = false;
      }, 300);
    }
  }
};
</script>

<style scoped lang="less">
@import "../style/base.less";

.homepage {
  background: #fff;
  width: 100%;
  .scrolltop {
    z-index: 111;
    position: fixed;
    bottom: 50 / @px;
    right: 50 / @px;
  }

  .usermoney {
    padding: 14 / @px 12 / @px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      color: #333;
      font-size: 28 / @px;
      span {
        font-size: 42 / @px;
        color: #ff0032;
        font-weight: 800;
      }
    }
    .right {
      font-size: 36 / @px;
      color: #1a1a1a;
      font-weight: 800;

      img {
        width: 14 / @px;
        margin-left: 10 / @px;
      }
    }
  }
  .swiper {
    padding-top: 20 / @px;
    padding-bottom: 20 / @px;
    background: #f5f5f5;
  }
  .draw_title {
    display: flex;
    align-items: center;
    padding: 30 / @px 14 / @px;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
    .left {
      border-left: 4px solid #1a1a1a;
      padding-left: 10 / @px;
      font-size: 32 / @px;
      font-weight: 800;
    }
    .right {
      color: #4d4d4d;
      font-size: 30 / @px;
      img {
        width: 14 / @px;
        margin-left: 10 / @px;
      }
    }
  }

  .goods_list {
    ul {
      padding: 24 / @px;
      padding-bottom: 0;
      padding-top: 0;
      li {
        padding-bottom: 24 / @px;
        padding-top: 24 / @px;
        border-bottom: 1px solid #e6e6e6;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 24 / @px;
        .goods_img {
          width: 180 / @px;
          height: 180 / @px;
        }
        .goods_text {
          color: #666;
          flex: 1;
          margin-left: 25 / @px;
          .goods_name {
            font-size: 30 / @px;
            color: #1a1a1a;
          }
          .goods_word {
            font-size: 26 / @px;
            color: #666;
          }

          .goods_join {
            font-size: 24 / @px; // margin-top: 26/@px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .gold {
              p:first-child {
                color: #ff0032;
              }
            }
            .btn {
              text-align: center;
              padding: 12 / @px 14 / @px;
              background: #ffdb4f;
              border-radius: 10 / @px;
              // line-height: 60 / @px;
              font-size: 28 / @px;
              color: #1a1a1a;
            }
          }
        }
      }
    }
  }
}
</style>